

<template>
  <main class="screen-cont">
    <div class="header"></div>
    <div class="left-top">
      <my-pie-chart :pie-data="chargingPile"></my-pie-chart>
    </div>
    <div class="left-bottom">
      <line-chart :line-data="processMonitor"></line-chart>
    </div>
    <div class="center">
      <center-svg></center-svg>
    </div>
    <div class="bottom">
      <bottom-panel :panel-item="dataAnalysis"></bottom-panel>
    </div>

    <div class="right-top">
      <right-top-panel :panel-items="chargingTop4"></right-top-panel>
    </div>
    <div class="right-center">
      <bar-chart :bar-data="chargingStatstic"></bar-chart>
    </div>
    <div class="right-bottom">
      <right-bottom :dots="exceptionMonitoring"></right-bottom>
    </div>
  </main>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import MyPieChart from './cpns/pie-chart.vue'
  import LineChart from './cpns/line-chart.vue'
  import BarChart from './cpns/bar-chart.vue'
  import RightBottom from './cpns/right-bottom-svg.vue'
  import centerSvg from './cpns/center-svg.vue'
  import bottomPanel from './cpns/bottom-panel.vue'
  import rightTopPanel from './cpns/right-top-panel.vue'

  import { getPowerScreenData } from '@/services/index'

  import { 
    chargingPileData,
    processMonitorData,
    chargingStatsticData,
    exceptionMonitoringData,
    dataAnalysisData,
    chargingTop4Data
  } 
  from './config/home-data'

  let chargingPile = ref(chargingPileData)
  let processMonitor = ref(processMonitorData)
  let chargingStatstic = ref(chargingStatsticData)
  let exceptionMonitoring = ref(exceptionMonitoringData)
  let dataAnalysis = ref(dataAnalysisData)
  let chargingTop4 = ref(chargingTop4Data)

  getPowerScreenData().then(res => {
    const { code, data } = res
    if (code === 200) {
      chargingPile.value = data.chargingPile.data
      processMonitor.value = data.processMonitoring.data
      chargingStatstic.value = data.chargingStatistics.data
      exceptionMonitoring.value = data.exceptionMonitoring.data
      dataAnalysis.value = data.dataAnalysis.data
      chargingTop4.value = data.chargingTop4.data
    }
  })
</script>
<style scoped>
.screen-cont {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("@/assets/images/bg.png") no-repeat;
}
.header {
  position: absolute;
  top: 21px;
  left: 0;
  right: 0;
  height: 56px;
  background: url("@/assets/images/bg_header.svg") no-repeat;
}
.left-top {
  position: absolute;
  top: 116px;
  left: 16px;
  width: 536px;
  height: 443px;
  background: url("@/assets/images/bg_left-top.svg") no-repeat;
}
.left-bottom {
  position: absolute;
  bottom: 49px;
  left: 16px;
  width: 536px;
  height: 443px;
  background-image: url(@/assets/images/bg_left_bottom.svg);
  background-repeat: no-repeat;
}
.right-top {
  position: absolute;
  right: 17px;
  top: 96px;
  width: 519px;
  height: 327px;
  background: url("@/assets/images/bg_right_top.svg") no-repeat;
}
.right-center {
  position: absolute;
  right: 17px;
  top: 443px;
  width: 519px;
  height: 327px;
  background: url("@/assets/images/bg_right_center.svg") no-repeat;
}
.right-bottom {
  position: absolute;
  right: 17px;
  bottom: 49px;
  width: 519px;
  height: 242px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("@/assets/images/bg_right_bottom.svg") no-repeat;
}

.center {
  position: absolute;
  right: 540px;
  bottom: 272px;
  width: 823px;
  height: 710px;
}
.bottom {
  position: absolute;
  right: 540px;
  bottom: 49px;
  width: 823px;
  height: 209px;
  background: url("@/assets/images/bg_bottom.svg") no-repeat;
}
</style>